<template>
  <div class="home">
    <home-header></home-header>
    <home-swiper :swiper="swiper"></home-swiper>
    <home-classic :classic="classic"></home-classic>
    <home-location></home-location>
    <home-hot :hot="hot"></home-hot>
    <home-like :like="like"></home-like>
    <home-goweek :goweek="goweek"></home-goweek>
    <home-footer></home-footer>
  </div>
</template>

<script>
  import HomeHeader from "./pages/Header"
  import HomeSwiper from "./pages/Swiper"
  import HomeClassic from "./pages/Classic"
  import HomeLocation from "./pages/Location"
  import HomeHot from "./pages/Hot"
  import HomeLike from "./pages/Like"
  import HomeGoweek from "./pages/Goweek"
  import HomeFooter from "./pages/Footer"
  import { mapState } from "vuex"
  export default {
      name: "Home",
      data(){
        return{
          changes:"",
          swiper:[],
          classic:[],
          hot: [],
          like:[],
          goweek:[]
        }
      },
      computed:{
        ...mapState(["city"])
      },
    mounted(){
      this.sendhttp();
    },
      components:{
          // 注册Home的子组件
        HomeHeader,
        HomeSwiper,
        HomeClassic,
        HomeLocation,
        HomeHot,
        HomeLike,
        HomeGoweek,
        HomeFooter
      },
      methods:{
        sendhttp(){
          this.$http({
            url:"http://www.jizhuangzhuang.com/mobiles/fitness/static/server/gethomedata.php"
          }).then((res)=>{
            this.changes = this.city;
            var data = res.data.data;
            data.forEach(item=>{
              if(item.city === this.city){
                this.swiper = item.swiper;
                this.classic = item.classic;
                this.hot = item.hot;
                this.like = item.like;
                this.goweek = item.goweek;
              }
            });
          }).catch((err)=>{
            console.log(err)
          })
        }
      },
      activated(){
        if(this.city !== this.changes){
          this.sendhttp();
          this.changes = this.city;
        }
      }
    }
</script>

<style scoped>
  .home{
    background: #f5f5f5;
  }
</style>
